<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>结算 - 简易商城</title>
    <link rel="stylesheet" href="../css/css/style.css">
    <style>
        body { background: #f5f5f5; }
        .checkout-container {
            max-width: 700px;
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px #eee;
            padding: 30px 40px;
        }
        .checkout-title {
            font-size: 28px;
            margin-bottom: 20px;
        }
        .checkout-list {
            margin-bottom: 20px;
        }
        .checkout-item {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding: 12px 0;
            font-size: 16px;
        }
        .checkout-item img {
            width: 60px; height: 60px; margin-right: 20px; border-radius: 6px; background: #fafafa;
        }
        .checkout-item span { margin-right: 20px; }
        .checkout-total {
            text-align: right;
            font-size: 18px;
            color: #e4393c;
            margin: 20px 0 30px 0;
        }
        .checkout-form input {
            width: 60%;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #ccc;
            margin-bottom: 16px;
            font-size: 15px;
        }
        .checkout-form button {
            background: #e4393c;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px 30px;
            font-size: 16px;
            cursor: pointer;
        }
        .checkout-form button:hover { background: #b7271e; }
        #orderMsg { color: #e4393c; margin-top: 15px; }
    </style>
</head>
<body>
    <div class="checkout-container">
        <div class="checkout-title">结算</div>
        <div class="checkout-list" id="checkoutList"></div>
        <div class="checkout-total" id="checkoutTotal"></div>
        <form id="orderForm" class="checkout-form">
            <input type="text" id="address" placeholder="收货地址" required><br>
            <button type="submit">提交订单</button>
        </form>
        <div id="orderMsg"></div>
    </div>
    <script src="../js/utils.js"></script>
    <script>
    // 渲染结算商品列表和总价
    function renderCheckout() {
        let cart = JSON.parse(localStorage.getItem('cart') || '[]');
        let html = '';
        let total = 0;
        if (cart.length === 0) {
            html = '<p style="color:#e4393c;">购物车为空</p>';
            document.getElementById('checkoutList').innerHTML = html;
            document.getElementById('checkoutTotal').textContent = '';
            document.getElementById('orderForm').style.display = 'none';
            return;
        }
        cart.forEach(item => {
            const p = getProductById(item.id);
            if (!p) return;
            total += p.price * item.quantity;
            html += `
                <div class="checkout-item">
                    <img src="../${p.image}" alt="${p.name}" onerror="this.src='../images/icons/default.png'">
                    <span>${p.name}</span>
                    <span>￥${p.price}</span>
                    <span>数量：${item.quantity}</span>
                    <span>小计：￥${p.price * item.quantity}</span>
                </div>
            `;
        });
        document.getElementById('checkoutList').innerHTML = html;
        document.getElementById('checkoutTotal').textContent = '总价：￥' + total;
        document.getElementById('orderForm').style.display = '';
    }

    // 提交订单
    document.addEventListener('DOMContentLoaded', function() {
        renderCheckout();
        document.getElementById('orderForm').onsubmit = function(e) {
            e.preventDefault();
            const user = localStorage.getItem('currentUser');
            if (!user) {
                document.getElementById('orderMsg').textContent = '请先登录';
                return;
            }
            let cart = JSON.parse(localStorage.getItem('cart') || '[]');
            if (cart.length === 0) {
                document.getElementById('orderMsg').textContent = '购物车为空';
                return;
            }
            let products = cart.map(item => {
                const p = getProductById(item.id);
                return {name: p.name, quantity: item.quantity, price: p.price};
            });
            let total = products.reduce((sum, item) => sum + item.price * item.quantity, 0);
            // 保存订单
            let orders = JSON.parse(localStorage.getItem('orders_' + user) || '[]');
            orders.push({
                time: new Date().toLocaleString(),
                items: products,
                total: total,
                address: document.getElementById('address').value
            });
            localStorage.setItem('orders_' + user, JSON.stringify(orders));
            localStorage.removeItem('cart');
            document.getElementById('orderMsg').textContent = '订单提交成功！';
            renderCheckout();
        };
    });
    </script>
</body>
</html>